<template>
	<view class="home-box">
		<view class="home-box-t" id="banner">
			<Banner></Banner>
		</view>
		
		<!-- 友伴官 -->
		<view class="content">
			<ArtistTab ref="ArtistTab" :operateType="operateType" :classifyData="classifyData"></ArtistTab>
		</view>

		
		
		<!-- 关注 -->
		<u-popup :show="show">
			<view class="popup-txt"><b>长按识别二维码关注公众号</b></view>
			<view class="popup-txt" style="color: blue">关注公众号后，请点击左下角菜单【立即下单】进入</view>
			<image :src="images.wechat_official_qr" style="margin: auto; width: 120px; height: 120px;">
			</image>
			<view class="popup">
				<view class="popup-c">
					<view class="">
						关注DD友伴公众号
					</view>
					<view>福利上新早知道</view>
				</view>
			</view>
		</u-popup>


		<tabBar></tabBar>


		<!-- 悬浮按钮 -->
		<fab-all></fab-all>
	</view>
</template>

<script>
	// 引入图片
	import imgs from '@/static/images/index.js'

	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import cookie from '@/utils/cookie.js'

	// api请求
	import {
		postArtistList, // 获取艺人列表
		postArtistHot, // 首页推荐
	} from '@/api/artist.js'
	
	// 页面组件
	import ArtistTab from './components/artistTab/index.vue'
	import Banner from './components/banner.vue'
	

	export default {
		name: 'home',
		components:{
			ArtistTab,
			Banner
		},

		data() {
			return {
				images: {}, // 图片组
				
				bannerHeight: 0, // banner的高度
				operateType: false, // 操作区域是否定位
				
				

				show: false,
				invitationCode: null,
				classifyData: [], // 艺人分类数据

				artistListData: [], // 艺人列表数据
				artistPageNum: 1, // 艺人数据当前页
			}
		},
		computed: {
			...mapGetters(['BannerList', 'NoticeList', 'barText', 'isLogin', 'userInfo', 'invitationCodeInfo',
				'locationInfo'
			]),
		},
		
		/**
		 * 页面滚动
		 */
		onPageScroll(e) {
			if(e.scrollTop > this.bannerHeight){
				this.operateType = true
			}else{
				this.operateType = false
			}
		},
		
		created() {
			this.images = {
				...imgs
			}
		},
		
		// 下拉
		async onPullDownRefresh() {
			// 友伴官原下拉
			this.$nextTick(()=>{
				this.$refs.ArtistTab.init()
			})
		},
		
		// 触底
		async onReachBottom() {
			
			// 友伴官原触底方法
			this.$nextTick(()=>{
				this.$refs.ArtistTab.myReachBottom()
			})
		},

		onLoad(e) {
			if (e.invitationCode) {
				this.invitationCode = e.invitationCode;
				console.log("invitationCode=", e.invitationCode)
				cookie.set('invitationCode', e.invitationCode)
			} else {
				let href = this.$baseURL + 'api';
				const match = href.match(/#\/\?(.*)/);
				if (match && match[1]) {
					const value = match[1];
					console.log("?" + value);
					this.invitationCode = value;
					cookie.set('invitationCode', value)
				} else {
					// this.invitationCode = '';
					// cookie.set('invitationCode', '')
					console.log('未找到匹配的值');
				}
			}
			this.getState({
				mapKey: 'AreaList'
			})
			this.getState({
				mapKey: 'BannerList'
			})
			this.getState({
				mapKey: 'NoticeList'
			})
			if (!this.isLogin) return
			this.getUserInfo()

		},
		mounted() {
			// 调用ref实例
			this.getRefs()
			

			


			let clickFollow = cookie.get('clickFollow');
			let token = cookie.get('token')
			let code = cookie.get('invitationCode');
			if (token) {
				this.show = false;
			} else {
				if (this.invitationCode) {
					this.show = true;
				} else {
					this.show = false;
				}
			}
		},
		async onShow() {
			if(Object.keys(this.userInfo).length<1){
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
			
			
			// 初始化
			this.init()
			
			// 调用原友伴官的show方法
			this.$nextTick(()=>{
				this.$refs.ArtistTab.myShow()
			})
			

			this.classifyData = await this.getCate({}) // 获取艺人分类
			this.setTabCurrent(0)

			this.getState({
				mapKey: 'AreaList'
			})
			this.getState({
				mapKey: 'BannerList'
			})
			this.getState({
				mapKey: 'NoticeList'
			})
			if (this.invitationCode) {
				this.setInvitationCodeInfo(this.invitationCode)
			}
			// 打个锚点
			if (!this.isLogin) return
			this.getUserInfo()
		},
		

		watch: {
			locationInfo: {
				handler(val, val2) {
					if(this.locationInfo.cityCode){
						this.init()
					}
				},
				deep: true
			}
		},

		
		// 初次进入同城组局会被拦截,设置首页离开时放开
		onHide() {
			this.setIsShow(true)
			
			// 隐藏页面时关闭选择弹窗
			this.$refs.ArtistTab.closePopShow1()
		},
		methods: {
			...mapActions(['getState', 'getUserInfo','getCheckMethod']),
			...mapMutations(['setInvitationCodeInfo', 'setTabCurrent','setIsShow']),
			...mapActions('home', ['getCate']),
			
			/**
			 * 获取refs实例
			 */
			getRefs(){
				let that = this
				// 这是banner的高度，当页面下拉超过这个高度的时候，友伴官的操作区域就变成定位
				const query = uni.createSelectorQuery().in(this);
				query.select('#banner').boundingClientRect(data => {
				  that.bannerHeight = data.height
				}).exec();
			},
			

			/**
			 * 初始化
			 */
			init() {
				// #ifdef MP-WEIXIN
					// 判断登录状态跳转页面
					this.getCheckMethod()
				//#endif
				
				

				console.log('运行了几次');
				this.artistPageNum = 1
				this.artistListData = []

				// this.getPostArtistList(this.locationInfo.cityCode)
			},
			

			/**
			 * 获取艺人列表
			 */
			async getPostArtistList(params) {
				try {
					const res = await postArtistHot(params);
					if (res.code !== 200) {
						uni.showToast({
							duration: 3000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
						return
					}

					this.artistListData.push(...res.data)

					console.log(this.artistListData, '艺人数据');

				} catch (error) {
					console.error(error, '获取艺人列表报错');
				}

			},



			
			
			/**
			 * 点击金刚区，进入艺人列表
			 */
			handleTab(cateId) {
				cookie.set('cateId', cateId)
				this.setTabCurrent(3)
				uni.switchTab({
					url: '/pages/artistTab/index'
				})
				
			},
			handleTo(url) {
				uni.navigateTo({
					url
				})
			},
			getSearchString(key, Url) {
				var str = Url;
				str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
				// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
				var arr = str.split("&");
				var obj = new Object();

				// 将每一个数组元素以=分隔并赋给obj对象
				for (var i = 0; i < arr.length; i++) {
					var tmp_arr = arr[i].split("=");
					obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
				}
				return obj[key];
			},
			follow() {
				cookie.set('clickFollow', '1')
				location.href =
					'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkzNDUzMTIzNQ==#wechat_redirect'
			},


		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.centered-view {
		/* 设置视图的宽度 */
	}

	.home-box {
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0) 100%);



		.swiper-box {
			padding: 24rpx 32rpx;
			width: 686rpx;
			height: 324rpx;
			margin-top: 8rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}

			::v-deep .uni-swiper-wrapper {
				uni-swiper-item {
					height: 240rpx;
				}

				// .uni-swiper-dots {
				// 	top: 18rpx;
				// 	right: 16rpx;
				// 	transform: none;
				// }

				.uni-swiper-dot-active {
					background-color: #fff !important;
				}

				.uni-swiper-dot {
					width: 16rpx;
					height: 16rpx;
					background: rgba(255, 255, 255, 0.4);
				}
			}
		}

		.diamond-box {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-bottom: 40rpx;
			padding: 0 32rpx 0 32rpx;
			gap: 48rpx;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 16rpx;
				}

				&>text {
					color: #0F0D21;
					font-family: SourceHanSansCN-Regular;
					font-size: 28rpx;
					text-align: center;
					margin-top: 8rpx;
				}
			}
		}

		.banner-box {
			padding: 0 32rpx 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.banner-box-l {
				width: 144rpx;
				height: 40rpx;
			}

			.more {
				margin-top: 8rpx;
				color: #E96776;
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				text-align: left;
			}

			.banner-box-r {
				display: flex;
				padding: 8rpx 16rpx 8rpx 8rpx;
				border-radius: 16px;
				opacity: 1;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
				align-items: center;

				&>image {
					&:first-child {

						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}

					&:last-child {
						width: 16rpx;
						height: 16rpx;
						margin-left: 30rpx;
					}
				}

			}
		}

		.header {
			padding: 12rpx 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

		.join-box {
			// margin-top: 32rpx;
			padding: 12rpx 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: calc(100% - 64rpx);
			gap: 24rpx;
		}

		.message {
			width: 326rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 8rpx;
			border-radius: 16rpx;
			border: 1px solid #00000019;
			gap: 8rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
				padding: 8rpx;
				border-radius: 20rpx;
				background-color: #E27C8A30;
			}

			.notice {
				flex: 1;
				color: #0F0D21;
				font-family: SourceHanSansCN-Medium;
				font-size: 18rpx;
			}
		}

		.join {
			width: 284rpx;
			height: 164rpx;
			background-size: 100% 100%;
			padding: 24rpx;
			position: relative;

			.bm-image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

			}

			.title {
				color: #0F0D21;
				font-family: SourceHanSansCN-Medium;
				font-size: 28rpx;
			}

			.desc {
				font-family: SourceHanSansCN-Regular;
				margin-top: 14rpx;
				color: #0F0D21;
				font-size: 18rpx;
				text-align: left;
			}

			.join-botton {
				width: 72rpx;
				height: 28rpx;
				border-radius: 14rpx;
				border: 1rpx solid #000000;
				margin-top: 16rpx;
				font-family: SourceHanSansCN-Regular;
				color: #000000;
				font-size: 16rpx;
				text-align: center;
				line-height: 28rpx;
			}
		}



	}

	::v-deep .uni-noticebar {
		padding: 0 !important;
		margin: 0 !important;

	}

	::v-deep .uni-noticebar__content-text,
	.uni-noticebar__content-text--scrollable {
		color: #0F0D21 !important;
		font-family: SourceHanSansCN-Medium !important;
		font-size: 18rpx !important;
	}

	.popup {
		height: 42px;
		padding: 18rpx 12rpx;

		&-c {
			font-family: Source Han Sans CN;
			font-size: 22rpx;
			font-weight: bold;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: 0px;
			width: 400rpx;
			height: 40rpx;
			margin: 0 auto;
			color: #0F0D21;
		}

		&-txt {
			font-family: Source Han Sans CN;
			font-size: 14px;
			font-weight: normal;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			width: 100%;
			padding-top: 22rpx;
			margin: 0 auto;
			padding-bottom: 18rpx;
			color: #3C4766;
		}

		&-btn {
			/* 自动布局 */
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// padding: 15px 145px;
			gap: 10px;
			width: 127px;
			height: 40px;
			border-radius: 20px;
			color: #FDF3F3;
			margin: 0 auto;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
		}
	}
	
	body{
		background: none;
	}
</style>

<!-- #ifdef MP-WEIXIN -->
<style>
	page{
		background: none;
	}
</style>
<!-- #endif -->